<template>
    <div class="SearchPage">
        <div class="search">
            <van-image
                @click="gotohome"
                width="7%"
                height="20"
                src=""
            />
            <van-search class="inp" :class="{item:flag}" v-model="value" placeholder="学院风jk套装" input-align="left" left-icon="" @focus= "inp" @blur="noinp" @keydown.enter="SearchValue()" />
            <div class="search-text" @click="SearchValue()">搜索</div>
        </div>
        <!-- 历史搜索 -->
        <div class="HistorySearch">
            <div class="History-top">
                <div class="History-top-left">
                    <van-icon name="search" size="15" />
                    历史搜索
                </div>
                <div class="History-top-right">
                    <van-icon @click="EmptySearchHistory" name="delete-o" size="15" />
                </div>
            </div>
            <div class="History-cent">
                <div class="History-cent-top" v-show="!SearchHistory">
                    <div  class="History-cent-item" v-for="(s,index) in SearchHistoryList" :key="index"
                        @click="HeatSearch(s)">
                        {{ s }}
                    </div>
                </div>
                <div 
				v-show="SearchHistory"
				class="no-search">暂无搜索历史</div>
            </div>
        </div>
        <!-- 热门搜索 -->
        <div class="topSearch">
            <div class="TopSearch-top">
                <van-image class="TopSearch-top-img" width="15" height="15" src="" />
                热门搜索
            </div>
            <div class="TopSearch-bot">
                <div class="TopSearch-bot-item" v-for="( h,index) in heatList" :key="index"
                    @click="HeatSearch(h.query)"
                >{{ h.query }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import {TopSearchAPI,SearchTextAPI} from '../../api/home'
// 
export default{
    data(){
        return{
            // 搜索框v-model绑定
            value:'',
            // 搜索框颜色改变
            flag:false,
            // 热门搜索数据
            heatList:[],
            // 历史搜索数据
            SearchHistoryList:[],
            // 搜索结果
            SearchResult:[],
            // 搜索
        }
    },
    methods:{
        // 搜索框颜色改变
        inp(){
            this.flag = true;
        },
        noinp(){
            this.flag = false
        },
        // 热门搜索数据
        async HeatSearchLIst(){
            let url = TopSearchAPI;
            let {data} = await this.$axios(url);
            this.heatList = data.data.hotWord.data;
        },
        // 获取存储的搜索历史
        GainSearchHistory(){
            // 把历史搜索存进data
            let list = JSON.parse(localStorage.getItem('Search'))
            if(list.length == 0){
                const info = [];
                localStorage.setItem('Search',JSON.stringify(info))
            }

            this.SearchHistoryList = list
        },
        // 搜索
        async SearchValue(){
            if(this.value.trim() == ''){
                return
            }
            let url = SearchTextAPI(this.value)
            let {data} = await this.$axios(url)
            this.SearchResult = data.result.wall.docs
            console.log(this.SearchResult);
            // 获取历史搜索
            let list = JSON.parse(localStorage.getItem('Search'))
			console.log(list);
            list = [this.value,...list.filter(item => item !== this.value)]
            let newlist = list;
            localStorage.setItem('Search',JSON.stringify(newlist))
            // 搜索和跳转到结果页
            this.gotoresult();

            // 存搜索历史
            this.GainSearchHistory();
        },
        // 返回到首页
        gotohome(){
            this.$router.go(-1)
        },
        // 热门搜索
        HeatSearch(text){
            this.value = text;
            this.SearchValue();
        },
        // 清空搜索历史
        EmptySearchHistory(){
            let list = JSON.parse(localStorage.getItem('Search'))
            list = []
            localStorage.setItem('Search',JSON.stringify(list))
            this.SearchHistoryList = list;
        },
        // 跳转到搜索结果页
        gotoresult(){
            this.$router.push({
                name:'SearchResult',
                query:{
                    text:this.value,
                }
            })
            // 清空搜索栏
            this.value = ''
        }
    },
    mounted(){
        this.HeatSearchLIst();
        this.GainSearchHistory();
    },
    computed:{
        // 判断是否有搜索历史
        SearchHistory(){

            if(this.SearchHistoryList == {} || []){
                return false
            }
            return true
        }
    }
}
</script>

<style lang="scss" scoped>
.SearchPage {
	background-color: #fff;
	min-height: 100vmax;
}
.search {
	height: 34px;
	padding: 5px 10px;
	border-bottom: 1px solid #eeeeee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.inp {
		width: 79%;
		height: 25px;
		border: 1px solid #aaaaaa;
		border-radius: 3px;
		display: flex;
		align-items: center;
		.van-search__content {
			background: transparent;
		}
		&.item {
			border: 1px solid #ff5777;
		}
	}
	.search-text {
		font-size: 14px;
		color: #666;
	}
}
.HistorySearch {
	padding: 10px;
	margin: 5px 0px 0px;
	border-bottom: 1px solid #f4f4f4;
	.History-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999;
		.History-top-left {
			font-size: 12.5px;
		}
	}
	.History-cent {
		.History-cent-top {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		.History-cent-item {
			height: 25px;
			line-height: 25px;
			padding: 0px 11px;
			border: 0.8px solid #f5f5f5;
			font-size: 12.5px;
			margin: 12.5px 0px 0px 10px;
			color: #333;
		}
		.no-search {
			height: 22.5px;
			font-size: 12.5px;
			color: #999;
			margin: 12.5px 0px 0px 10px;
		}
	}
}
.topSearch {
	padding: 10px;
	margin: 5px 0px 0px;
	.TopSearch-top {
		display: flex;
		align-items: center;
		font-size: 12.5px;
		color: #999;
		.TopSearch-top-img {
			margin-right: 3px;
		}
	}

	.TopSearch-bot {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		.TopSearch-bot-item {
			height: 25px;
			line-height: 25px;
			padding: 0px 11px;
			border: 0.8px solid #f5f5f5;
			font-size: 12.5px;
			margin: 12.5px 0px 0px 10px;
			color: #333;
		}
	}
}
</style>
